import React, { Component } from 'react'
import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
import {
    SmileFilled,
    HomeFilled,
    TagsFilled,
    InfoCircleFilled
} from '@ant-design/icons';
import { Menu } from 'antd';
import giteeImg from '../../images/gitee.svg';
import githubImg from '../../images/github.svg';
import mailImg from '../../images/mail.svg'
import './LeftSider.less'
import portrait from '../../images/3.jpg';
import { queryCategories } from '../../api/home';
import ArticleCate from '../../types/ArticleCate';
const { SubMenu } = Menu;

interface IProps extends RouteComponentProps {
}
interface IState {
    cates: ArticleCate[];
}

class LeftSider extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            cates: []
        }
    }
    async componentDidMount() {
        const cates: Array<ArticleCate> | null = await queryCategories();
        if (!!cates) {
            this.setState({
                cates
            })
        }
    }
    render() {

        return (
            <div className='leftSider'>
                <div className="portraitBox">
                    <img className='portrait' src={portrait} />
                </div>
                <div className="siderName">
                    <h1>foriL</h1>
                </div>
                <div className="iconBox">
                    <div className="iconLink">
                        <a target="_blank" rel="noopener noreferrer" href='https://gitee.com/foril' title="gitee">
                            <img src={giteeImg} alt="gitee" />
                        </a>
                    </div>
                    <div className="iconLink">
                        <a href="mailto:1571825323@qq.com" target="_blank" title="邮件">
                            <img src={mailImg} alt="github" />
                        </a>
                    </div>
                    <div className="iconLink">
                        <a target="_blank" rel="noopener noreferrer" href='https://github.com/foriLLL' title="github">
                            <img src={githubImg} alt="github" />
                        </a>
                    </div>
                </div>
                <Menu
                    style={{ width: '80%', border: 'none', fontSize: '1rem', fontWeight: 'bold' }}
                    selectedKeys={[this.props.location.pathname]}
                    mode="inline"
                >
                    <Menu.Item key="/" icon={<HomeFilled />}>
                        <Link to='/'>首页</Link>
                    </Menu.Item>

                    <SubMenu key="blog" icon={<TagsFilled />} title="分类">
                        {this.state.cates.map(eachCate => (
                            <Menu.Item key={`/cate/${eachCate.cateID}`}>
                                <Link to={`/cate/${eachCate.cateID}`}>{eachCate.cateName}</Link>
                            </Menu.Item>
                        ))}

                    </SubMenu>
                    <Menu.Item key="/spray" icon={<SmileFilled />}>
                        <Link to='/spray'>心情</Link>
                    </Menu.Item>
                    <Menu.Item key="/about" icon={<InfoCircleFilled />}>
                        <Link to='/about'>关于</Link>
                    </Menu.Item>

                </Menu>
            </div>
        )
    }
}

export default withRouter(LeftSider)